import React, { useEffect, useCallback } from 'react'
import { useSelector, shallowEqual } from 'react-redux'
import { Link } from 'react-router-dom'
import store from 'store'
import Spinner from 'react-spinkit'
// import dayjs from 'dayjs'

import { getList } from 'api/demo'

const Demo = (props) => {
  const { loading, list, lastUpdated } = useSelector(state => ({
    list: state.list,
    loading: state.loading.global,
    lastUpdated: state.updated.list.modifySync
  }), shallowEqual)

  useEffect(() => {
    // console.log(globalConfig)
    // console.log(list, 'store')
    // console.log(dayjs(lastUpdated).format('YYYY-MM-DD HH:mm:ss'), 'lastUpdated')
  }, [ lastUpdated, list, loading ])

  useEffect(() => {
    (async() => {
      let res = await getList()
      console.log(res)
    })()
  }, [])

  const modifyList = useCallback(() => {
    store.dispatch.list.modifyName()
  }, [])

  function iptChange(key) {
    store.dispatch.list.modifySync(key)
  }

  return (
    <div>
      <div>App Component {" "}</div>
      <Link to='/about'>跳转路由</Link>
      <button onClick={modifyList}>修改store</button>
      {
        list.map((item, key) => (
          <div key={key}>
            <input
              type="checkbox"
              onChange={() => iptChange(key)}
              checked={item.disabled}
            />
            当前名字：<span>{item.name}</span>
          </div>
        ))
      }
      {
        loading &&
        <Spinner name="line-scale" color="black" />
      }
    </div>
  )
}

export default Demo
